<template>
  <div id="big-container" ref="bigContainer">
    <slot />
  </div>
</template>

  <script>
  export default {
    props: {
      options: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data () {
      return {
        width: 0, // 大屏真实宽度
        height: 0, // 大屏真实高度
        originalWidth: 0, // 窗口原始宽度
        originalHeight: 0 // 窗口原始高度
      }
    },
    async mounted () {
      // 获取相关尺寸数据
      await this.initSize()
      // 设置容器尺寸，让容器尺寸与内容尺寸一致
      this.updateSize()
      // 设置容器缩放比例，实现内容一屏完整显示
      this.updateScale()
      // 监听 resize事件，实现页面动态适配
      window.addEventListener('resize', this.onResize)
    },
    beforeDestroy () {
      // 页面销毁前 移除 resize 事件监听
      window.removeEventListener('resize', this.onResize)
    },
    methods: {
      // 获取相关尺寸数据
      initSize () {
        return new Promise(resolve => {
          // 使用 nextTick 确保容器中的内容渲染完成
          this.$nextTick(() => {
            // 获取大屏真实尺寸
            if (this.options.width && this.options.height) {
              this.width = this.options.width
              this.height = this.options.height
            } else {
              // 若未传递大屏真实尺寸，则获取容器被内容撑满后的尺寸 作为大屏真实尺寸
              this.width = this.$refs.bigContainer.clientWidth
              this.height = this.$refs.bigContainer.clientHeight
            }
            // 获取窗口原始尺寸
            if (!this.originalWidth || !this.originalHeight) {
              this.originalWidth = window.screen.width
              this.originalHeight = window.screen.height
            }
          })
          resolve()
        })
      },
      // 设置容器尺寸，让容器尺寸与内容尺寸一致
      updateSize () {
        if (this.width && this.height) {
          this.$refs.bigContainer.style.width = `${this.width}px`
          this.$refs.bigContainer.style.height = `${this.height}px`
        }
      },
      // 设置容器缩放比例，实现内容一屏完整显示
      updateScale () {
        // 屏幕视口存在认为缩放，拖动，导致真实视口发生变化，这里获取真实的视口尺寸
        const currentWidth = document.body.clientWidth
        const currentHeight = document.body.clientHeight
        // 获取大屏最终宽高， 若未获得大屏幕尺寸，则将屏幕视口原始尺寸作为大屏最终宽高
        const realWidth = this.width || this.originalWidth
        const realHeight = this.height || this.originalHeight
        // 计算宽高比
        const widthScale = currentWidth / realWidth
        const heightScale = currentHeight / realHeight
        this.$refs.bigContainer.style.transform = `scale(${widthScale}, ${heightScale})`
      },
      // 监听 resize 事件， 动态更新容器缩放比
      async onResize () {
        await this.initSize()
        this.updateScale()
      }
    }
  }
  </script>

  <style lang="less">
  #big-container {
    position: fixed;
    top: 0;
    overflow: hidden;
    transform-origin: left top;
    z-index: 9999;
  }
  </style>
